<template>
  <div class="app-container" :style="tableHeight">
    <el-row>
      <el-col style="text-align:right;margin-top: -3px;">
        <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleQuery">重置</el-button>
        <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="saveData">保存</el-button>
      </el-col>
      <el-col>
        <el-row style="display: flex;justify-content: center;">
          <el-col :span="6">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>汇总单位列表:  </span>
              </div>
              <el-table
                ref="agencyTable"
                v-loading="agencyLoading"
                :data="AgencyData"
                :height="tableHeight"
                :stripe="true"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                style="width: 100%"
                :header-cell-class-name="cellCheckbox"
                @selection-change="handleAgencySelectionChange"
                @row-click="handleAgencyRowClick"
                @select="tableSelect"
              >
                <template slot="empty"><tableEmpty /></template>
                <el-table-column type="selection" width="50" />
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="agencyName" label="名称" />
                <el-table-column prop="agencyCode" label="编码" />
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 50%; margin-left: 50%;" />
          </el-col>
          <el-col :span="6">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>合并单位列表: </span>
              </div>
              <el-table
                ref="salaryTable"
                v-loading="salaryLoading"
                :data="SummaryAgency"
                :height="tableHeight"
                :stripe="true"
                style="width: 100%"
                
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                @selection-change="handleSalarySelectionChange"
                @row-click="handleSalaryRowClick"
              >
                <template slot="empty"><tableEmpty /></template>
                <el-table-column type="selection" width="50" :selectable="selectable" />
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="summaryAgencyName" label="工资项名称" />
                <el-table-column prop="summaryAgencyCode" label="工资项编号" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
export function getquerySalaryMeritPay(query) {
  return request({
    url: '/SalaryMeritPayController/querySalaryMeritPay',
    method: 'get',
    params: query
  })
}
<script>
import tableEmpty from '@/components/table/empty'
import { getAgencys,getSummaryAgency,saveSummaryAgency,querySummaryAgency} from '@/api/salaryConfigManage/salarySummaryAgency'
export default {
  name: 'SalaryProjectConnect',
  components: { tableEmpty },
  data() {
    return {
      tableHeight: null,
      agencyLoading: false,
      AgencyData: [],
      salaryLoading: true,
      SummaryAgency: [],
      agencySelectData: [], // 单位表格选中数据
      salarySelectData: [], // 工资表格选中数据
      agencyCode: '' // 左边选中的
    }
  },
  watch: {
    SummaryAgency(val) {
      this.doLayout()
    },
    AgencyData(val) {
      this.doLayout()
    }
  },
  created() {
    this.querySalaryBasedataInfo()
    this.getqueryMeritPayType()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 保存
    saveData() {
      if (this.agencySelectData.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择单位',
          type: 'warning',
          duration: 4000
        })
        return
      }
      if (this.salarySelectData.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择合并的单位',
          type: 'warning',
          duration: 4000
        })
        return
      }
        if (this.agencySelectData.length > 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }

       const tmplist = []
      this.salarySelectData.forEach(item => {
        const object = {
          agencyId:this.agencySelectData[0].agencyId,
          agencyName: this.agencySelectData[0].agencyName,
          agencyCode: this.agencySelectData[0].agencyCode,
          summaryAgencyId: item.summaryAgencyId,
          summaryAgencyName: item.summaryAgencyName,
          summaryAgencyCode: item.summaryAgencyCode
        }
        tmplist.push(object)
         
      })
   
      saveSummaryAgency(tmplist).then(response => {
        this.$message({
          showClose: true,
          message: '保存成功',
          type: 'success',
          duration: 4000
        })
      })
    },
    handleQuery() {
      this.$refs.salaryTable.clearSelection()
      this.$refs.agencyTable.clearSelection()
      this.querySalaryBasedataInfo()
    },
    // 获取左边列表的信息
    getqueryMeritPayType() {
      this.agencyLoading = true
      getAgencys().then(respnse => {
       
        this.AgencyData = respnse.data
       
        this.agencyLoading = false
      })
    },
    // 获取右边列表的信息
    querySalaryBasedataInfo() {
      getSummaryAgency().then(response => {
       
         this.SummaryAgency = response.data
        this.salaryLoading = false
      })
    },
    // 点击工资项表格行选中复选框
    handleSalaryRowClick(row) {
      if (row.salaryCode !== 's1' && row.salaryCode !== 's2') {
        this.$refs.salaryTable.toggleRowSelection(row)
      }
    },
    // 工资项表格选中数据
    handleSalarySelectionChange(val) {

      this.salarySelectData = val
    },
    tableSelect(row) {

      if (this.agencySelectData.length > 0) {
        for (let i = 0; i < row.length; i++) {
          if (row[i].agencyId !== this.agencySelectData[0].agencyId) {
            // 获取表格选中数据。 如果和当前不一致，取消选中
            const selectionData = this.$refs.agencyTable.selection
            for (let j = 0; j < selectionData.length; j++) {
              if (selectionData[j].agencyId !== row[i].agencyId) {
                this.$refs.agencyTable.toggleRowSelection(
                  selectionData[j],
                  false
                )
              }
            }
          }
        }
      }
      return
    },
    // 点击单位表格行选中复选框
    handleAgencyRowClick(row) {
      // 如果当前时选中状态，在点击该数据时，取消选中
      if (this.agencySelectData.length > 0) {
        if (row.agencyId !== this.agencySelectData[0].agencyId) {
          this.$refs.agencyTable.clearSelection()
          this.$refs.agencyTable.toggleRowSelection(row)
        } else {
          this.$refs.agencyTable.toggleRowSelection(row)
        }
      } else {
        this.$refs.agencyTable.toggleRowSelection(row)
      }
    },
    // 单位表格选中数据
    handleAgencySelectionChange(val) {
     this.agencySelectData = val
      this.$refs.salaryTable.clearSelection()
      const array = []
      // 获取表格选中数据,放到数组中缓存
      const selectionData = this.$refs.agencyTable.selection

      for (let i = 0; i < val.length; i++) {
        if (selectionData[0].agencyId === val[i].agencyId) {
          array.push(val[i])
        }
      }
        this.agencySelectData = selectionData
      // 获取单位现有的工资项
      if (val.length > 0) {
        this.agencyCode = selectionData[0].agencyCode
        
        this.getagencyCode()
      } else {
        // 当单位表格取消选中时，将工资项表格选中状态清空
        this.$refs.salaryTable.clearSelection()
      }
    },
    // 根据单位id查询已挂接的工资项
    getagencyCode() {
      const tmp = {
        agencyCode: this.agencyCode
        
      }
      querySummaryAgency(tmp).then(respose => {
        // 如果有挂接，将已挂接的工资项选中
        if (respose.data.length > 0) {
              respose.data.forEach(val => {
            this.SummaryAgency.forEach(row => {
              if (val.summaryAgencyCode === row.summaryAgencyCode) {
                this.$refs.salaryTable.toggleRowSelection(row, true)
                return
              }
            })
          })
        }
      })
    },
    cellCheckbox(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 350
    },
    selectable(row) {
      // 实发项和应发项复选框disable，不允许修改
      if (row.salaryCode === 's1' || row.salaryCode === 's2') { return false } else { return true }
    },
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.salaryTable.doLayout()
        this.$refs.agencyTable.doLayout()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/
.el-table {
  margin-top: 5px;
  ::v-deep .disabledCheck {
    .cell {
      .el-checkbox {
        .el-checkbox__input {
          display: none !important;
        }
      }
    }
  }
}
.el-card {
  border: 10px solid #65afff;
  box-shadow: 10px 10px 5px #888;
}
</style>
